<template>
  <div id="box">
    <div class="car-box">
      <p>基本信息</p>
      <div class="inner">
        <p><span class="tip">车辆ID<span></span></span>:<span class="text">{{single_car&&single_car.id?single_car.id:'暂无'}}</span>
        </p>
        <p><span class="tip">车辆类型<span></span></span>:<span class="text">{{single_car&&single_car.carName?single_car.carName:'暂无'}}</span>
        </p>
        <p><span class="tip">司机姓名<span></span></span>:<span class="text">{{single_car&&single_car.driver?single_car.driver:'暂无'}}</span>
        </p>
        <p><span class="tip">联系方式<span></span></span>:<span class="text">{{single_car&&single_car.tel?single_car.tel:'暂无'}}</span>
        </p>
        <p><span class="tip">所属公司<span></span></span>:<span class="text">{{single_car&&single_car.company?single_car.company:'暂无'}}</span>
        </p>
        <p v-if="single_car.carRoute"><span class="tip">所属线路<span></span></span>:<span class="text">{{single_car.carRoute}}</span>
        </p>
        <p v-if="home_state === 'realtime_single'"><span class="tip">更新时间<span></span></span>:<span class="text">{{single_car&&single_car.time?single_car.time:'暂无' | dateFilter}}</span>
        </p>

      </div>
    </div>
    <div class="path-box" v-if="home_state==='history_single'">
      <p>历史轨迹信息</p>
      <div class="inner">
        <p><span class="tip">选择日期<span></span></span>:<span class="text">{{`${single_time.year}-${single_time.month<10?'0'+single_time.month:single_time.month}-${single_time.day}`}}</span>
        </p>
        <p><span class="tip">平均车速<span></span></span>:<span class="text">{{pathInfo?pathInfo.speed+' km/h':'暂无数据'}}</span>
        </p>
        <p><span class="tip">总里程<span></span></span>:<span class="text">{{pathInfo?pathInfo.mileage+' km':'暂无数据'}}</span>
        </p>
        <p><span class="tip">驾驶时长<span></span></span>:<span class="text">{{pathInfo?pathInfo.duration+' 分钟':'暂无数据'}}</span>
        </p>
      </div>
    </div>
    <div class="path-box" v-if="home_state==='realtime_single' && illegalInfo.length > 0">
      <p>违规信息</p>
      <EasyScrollbar :barOption="listBar">
        <ul class="path inner">
          <li v-for="item in illegalInfo">
            <p class="type"><span class="tip">报警类型<span></span></span>:<span class="text">{{item.type}}</span></p>
            <p v-if="item.speed"><span class="tip">平均速度<span></span></span>:<span class="text">{{item.speed}}km/h</span></p>
            <p><span>发生位置</span>:<span class="text" :title="item.place">{{item.place}}</span></p>
            <p><span class="tip">发生时间<span></span></span>:<span class="text">{{item.time}}</span></p>
          </li>
        </ul>
      </EasyScrollbar>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import DateTimeHelper from '../../../util/datetime-helper'

  export default {
    name: 'SingleHistoryInfo',
    data() {
      return {
        listBar: {
          barColor: "#26a2d6",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 6,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.4,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
      }
    },
    mounted() {
    },
    filters:{   //过滤器
      dateFilter(value) {
        if(value!='暂无'){
          return DateTimeHelper.returnStandardDate(value);
        }else{
          return value;
        }
      }
    },
    props: {
      carInfo: {
        type: Object
      },
      illegalInfo: {
        type: Array
      },
      pathInfo: {
        type: Object
      }
    },
    computed: {
      ...mapGetters(['home_state', 'single_car','single_time']),
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../../static/common/common";

  #box {
    position: absolute;
    right: 0;
    top: 100px;
    z-index: 200;
    width: 320px;
    height: 500px;
    pointer-events: auto;
    & > div {
      width: 100%;
      @include borderBlur;
      & > p {
        margin: 0;
        @include linearTitle;
      }
      .inner {
        height: calc(100% - 34px);
        box-sizing: border-box;
        padding: 10px;
        p {
          text-align: left;
          font-size: $font-normal;
          line-height: 26px;
          & > span {
            &:first-child {
              margin-right: 3px;
              margin-left: 3px;
            }
            display: inline-block;
            vertical-align: middle;
            &.tip {
              width: 68px;
              height: 26px;
              text-align: justify;
              text-justify: inter-word;
            }
            &.text {
              margin-left: 5px;
              opacity: 0.8;
              display: inline-block;
              width: 210px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            &.tel {
              margin-left: 10px;
              opacity: 0.8;
            }
            span {
              display: inline-block /* Opera */
            ;
              padding-left: 100%;
            }
          }
        }
      }
    }
    .car-box {
      min-height: 175px;
      & > div {

      }
    }
    .path-box {
      min-height: 140px;
      margin-top: 20px;
      .path {
        max-height: 300px;
        margin: 0;
        li {
          margin: 10px 0;
          .type {
            line-height: 25px;
            font-size: $list-font;
            color: $color-warn;
          }
        }
      }
    }
  }
</style>
